<template>
  <hooyn-nav-bar
    class="header"
    leftIcon=""
    title="党群服务中心"
    leftIconfont="false"
    fontSize="16px"
    leftIconColor="#fff"
    color="#fff"
    backgroundColor="#68A0F7"
    :returnNav="true"
  />
  <!-- <hooyn-nav-bar class="header" leftIcon="arrow-left" title="党群服务中心" backgroundColor="#68A0F7" leftIconfont="true" fontSize="16px" leftWidth=""
  color="#fff"
    :returnNav="true" >
    <template #left>
        <van-icon @click="list"  name="arrow-left" size="22" color="#fff"/>
    </template>
    <template #right>
      <img  src="../../static/svg/xiaochengxu.svg" alt="">
    </template>
  </hooyn-nav-bar> -->
  <!-- <div id="container"></div> -->
  <div class="service">
    <div class="service-top" >
      <img src="../../assets/ion10.png" alt="" />
      <div class="libj">
        <div class="list">中共宝安县第一次党代会</div>
        <div class="list">会址预约电话:(0755)27059740</div>
      </div>
    </div>
    <!-- //@click="pathlist(item.link)" -->
    <div class="service-contont" v-for="item in state.data" :key="item" >
      <div class="contont-left">
        <img
        @click="setitm(item.Name,item.ID)"
          :src="
            'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/' +
            item.Image[0].url
          "
          v-if="item.Image.length > 0"
          style="
            user-select: auto;
            pointer-events: auto;
            -webkit-touch-callout: none;
          "
        />
        <!-- <img src="../../assets/ion23.png" v-if="item.Name == '燕罗党群服务中心'">
            <img src="../../assets/ion24.png" v-if="item.Name == '罗田社区党群服务中心'">
            <img src="../../assets/ion25.png" v-if="item.Name == '燕川社区党群服务中心'">
            <img src="../../assets/ion26.png" v-if="item.Name == '山门社区党群服务中心'">
            <img src="../../assets/ion27.png" v-if="item.Name == '洪桥头社区党群服务中心'">
            <img src="../../assets/ion22.png" v-if="item.Name == '塘下涌社区党群服务中心'"> -->
      </div>
      <div class="contont-right" >
        <div class="dz"  @click="setitm(item.Name,item.ID)">{{ item.Name }}</div>
        <div class="list"  @click="setitm(item.Name,item.ID)" >
          <img src="../../assets/dingwei.png" alt="" />
          {{ item.Address.substring(0, 13) }}
        </div>
        <div class="list listt"  @click="setitm(item.Name,item.ID)" >
          {{ item.Address.substring(13, item.Address.length) }}
        </div>
        <a class="phone" :href="'tel:' + item.Phone"
          ><img src="../../assets/dianhua.png" alt="" />{{ item.Phone }}</a
        >
      </div>
    </div>
  </div>
</template>
<script setup >
import $api from "@/utils/api";
const router = useRouter();

const state = reactive({
  data: [],
  map:null,
});
onMounted(() => {
  $api.buildingservices().then((res) => {
    if (res.message != "") {
      state.data = res.message;
      state.data.sort(function (a, b) {
        return a.ID - b.ID;
      });
    }
  });
});

const setitm = (item,id) => {
    router.push({
    path:'/serviceitem',
    query: {
        telite:item,
        id:id,
      }
  })
}
onMounted(()=>{
})
</script> 
<style lang="scss" scoped>
#container{
    position: relative;
    height: 10rem;
    width: 100vw;
    :deep().rotate-circle{
        display: none !important;
    }
    :deep() .tmap-zoom-control{
        display: none !important;
    }
    :deep().logo-text{
        display: none !important;
    }
    :deep().tmap-scale-text{
        // display: none !important;
    }
    :deep()  a {
        max-width: 100vw !important;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 33333333;
    }
}
.service {
  padding: 0.6rem 0.8rem;
  .service-top {
    width: 100%;
    position: relative;
    text-align: center;
    img {
      width: 100%;
      margin-bottom: 1.5rem;
    }
    .libj {
      position: absolute;
      bottom: 1.7rem;
      width: 100%;
      height: 5rem;
      background: linear-gradient(
        to top,
        rgba(230, 129, 126, 0.8),
        rgba(170, 122, 122, 0.4)
      );
      display: flex;
      justify-content: center;
      flex-direction: column;
      .list {
        font-size: 1.2rem;
        color: #fff;
        letter-spacing: 0.15rem;
      }
    }
  }
  .service-contont {
    width: 100%;
    display: flex;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.8rem;
    .contont-left {
        width: 35%;
      margin-right: 0.5rem;
      img {
        width: 7.5rem;
        height: 7.5rem;
      }
    }
    .contont-right {
        width: 68%;
      .dz {
        margin-bottom: 0.6rem;
        font-size: 1.1rem;
        font-weight: bold;
        padding-left: 1.5rem;
        img {
          width: 1.2rem;
          height: 1.2rem;
          position: relative;
        }
      }
      .list {
        color: #7a7a7a;
        margin-bottom: 0.4rem;
        font-size: 0.8.5rem;
        line-height: 1.4rem;
        display: flex;
        align-items: center;
        // .van-icon{
        //     font-size: 1.2rem;
        //     color: red;
        // }
        img {
          margin-right: 0.3rem;
          width: 1.2rem;
          height: 1.25rem;
        }
      }
      .listt {
        padding-left: 1.5rem;
      }
      .phone {
        color: #7a7a7a;
        font-size: 0.8.5rem;
        line-height: 1.4rem;
        display: flex;
        align-items: center;
        img {
          margin-right: 0.3rem;
          width: 1.2rem;
          height: 1rem;
        }
      }
    }
  }
}

.header {
  .outlogin {
    width: 100%;
    font-size: 0.875rem;
  }
  img {
    max-width: 5.5rem;
    height: 1.75rem;
  }
}
</style>